<template>
  <div class="page-container">
    <main>
      <div class="page-container__title">XXX CRM系统</div>
      <el-form
        ref="refFormModel"
        label-width="60px"
        :model="formModel"
        label-position="left"
        :rules="rules"
        class="page-container__form"
      >
        <el-form-item
          label="账号"
          prop="userName"
        >
          <el-input v-model="formModel.userName" placeholder="请输入账号" type="text"/>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="pwd"
        >
          <el-input v-model="formModel.pwd" placeholder="请输入密码" type="password"/>
        </el-form-item>
        <el-form-item>
          <footer class="text-center">
            <el-button :loading="loading" class="btn_submit" type="primary" @click="login()">
              登录
            </el-button>
          </footer>
        </el-form-item>
      </el-form>
    </main>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, unref } from 'vue'
import { ElMessage } from 'element-plus'
import { userModule } from '@/store/modules/user'
import { useRouter } from 'vue-router'
export default defineComponent({
  setup() {
    const formModel = reactive({
      userName: 'admin',
      pwd: '123'
    })
    const refFormModel = ref<Nullable<null>>(null)
    const loading = ref(false)
    const router = useRouter()
    function login() {
      const postData = {
        phone: parseInt(formModel.userName),
        password: formModel.pwd
      }
      unref(refFormModel as any).validate((valid) => {
        if (valid) {
          loading.value = true
          // 模拟登陆
          setTimeout(() => {
            userModule.setAuth('123')
            userModule.setUserInfo({ realname: 'admin' })
            router.replace('/')
          }, 2000)
        }
      })
    }
    return {
      formModel,
      login,
      loading,
      refFormModel,
      rules: {
        userName: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  }
})
</script>
<style lang="less" scoped>
.page-container {
  background-color: #4992d3;
  width: 100vw;
  height:100vh;
  padding: 2px;
  position: relative;
  main {
    background-color: #296ca8;
    padding: 0px 20px;
    padding-top: 20px;
    width: 400px;
    border-radius: 8px;
    position: absolute;
    left: 50%;
    top: 20vh;
    transform: translateX(-50%);
  }
  &__title {
    text-align: center;
    color: #8c888b;
    font-size: 24px;
    font-weight: bold;
    background: -webkit-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
    color: transparent;
    /*设置字体颜色透明*/
    -webkit-background-clip: text;
    /*背景裁剪为文本形式*/
    animation: ran 10s linear infinite;
  }
  &__form {
    margin-top: 10px;
  }
}
.btn_submit {
  width: 250px;
}
:deep(.el-form-item__label) {
  color:#a9d3ff;
}
@keyframes ran {
  from {
    backgroud-position: 0 0;
  }
  to {
    background-position: 2000px 0;
  }
}
</style>
